<template>
  <svg :class="['g-icon',{rotate:name==='reload'||spin}]" @click="$emit('click', $event)">
    <use :xlink:href="`#lm-${name}`"></use>
  </svg>
</template>
<script>
  import './svg'
  export default {
    name: 'LmIcon',
    props: ['name','spin']
  }
</script>
<style lang="scss" scoped>
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .g-icon {
    vertical-align: middle;
    width: 1em; height: 1em; 
    &.rotate{
      animation: spin 1s infinite linear;
    }
  }

</style>
